<template>
  <div>
        <input 
            :id="`input-${placeholder}`"
            :placeholder="placeholder"
            class="
                block
                w-full
                bg-[#F1F1F2]
                text-gray-800
                border
                border-gray-300
                rounded-md
                py-2.5
                px-3
                focus:outline-none
            " 
            :type="inputType"
            v-model="inputComputed"
            autocomplete="off"
            :maxlength="max"
        >
        <span v-if="error" class="text-red-500 text-[14px] font-semibold">
            {{ error }}
        </span>
    </div>
</template>
<script setup>
  const emit = defineEmits(['update:input'])

  const props = defineProps(['input', 'placeholder', 'inputType', 'max', 'autoFocus', 'error'])
  const { input, placeholder, inputType, max, autoFocus, error } = toRefs(props)

  onMounted(() => {
      if (autoFocus.value) {
          document.getElementById(`input-${placeholder.value}`).focus()
      }
  })

  const inputComputed = computed({
      get: () => input.value,
      set: (val) => emit('update:input', val)
  })

</script>
<style scoped>

</style>